<!DOCTYPE html>
<html>
	<head>
		<title>AlloyFinger</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<style>
			.ribbon {
				top: 3.2em;
				right: -4.7em;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
				color: #fff;
				display: block;
				padding: .6em 3.5em;
				position: fixed;
				text-align: center;
				text-decoration: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				background-color: green;
				z-index: 10000;
			}
		</style>
	</head>

	<body>
		<a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
		<script src="../../asset/transform.js"></script>
		<script src="../../alloy_finger.js"></script>
		<script src="../../asset/image_loaded.js"></script>
		<script src="../../asset/to.js"></script>
		<div id="imgBox" style="position:fixed;width: 100%;height: 100%;left:0;top:0;background:black;display: none;">
			<img src="../../asset/cover.jpg" id="testImg" alt="" style="width: 100%;position: absolute; " />
		</div>

		<script>
			var topPx;
			imageLoaded("#testImg", function(w, h) {
				document.querySelector("#imgBox").style.display = "block";
				topPx = window.innerHeight / 2 - (h * window.innerWidth / w) / 2;
				this.style.top = topPx + "px";
			});

			function ease(x) {
				return Math.sqrt(1 - Math.pow(x - 1, 2));
			}

			var el = document.getElementById("testImg");
			Transform(el);
			var initScale = 1;
			new AlloyFinger(el, {
				multipointStart: function() {
					To.stopAll();
					initScale = el.scaleX;
				},
				rotate: function(evt) {
					el.rotateZ += evt.angle;
				},
				pinch: function(evt) {
					el.scaleX = el.scaleY = initScale * evt.zoom;
				},
				multipointEnd: function() {
					To.stopAll();
					if(el.scaleX < 1) {

						new To(el, "scaleX", 1, 500, ease);
						new To(el, "scaleY", 1, 500, ease);
					}
					if(el.scaleX > 2) {

						new To(el, "scaleX", 2, 500, ease);
						new To(el, "scaleY", 2, 500, ease);
					}
					var rotation = el.rotateZ % 360;

					if(rotation < 0) rotation = 360 + rotation;
					el.rotateZ = rotation;

					if(rotation > 0 && rotation < 45) {
						new To(el, "rotateZ", 0, 500, ease);
					} else if(rotation >= 315) {
						new To(el, "rotateZ", 360, 500, ease);
					} else if(rotation >= 45 && rotation < 135) {
						new To(el, "rotateZ", 90, 500, ease);
					} else if(rotation >= 135 && rotation < 225) {
						new To(el, "rotateZ", 180, 500, ease);
					} else if(rotation >= 225 && rotation < 315) {
						new To(el, "rotateZ", 270, 500, ease);
					}
				},
				pressMove: function(evt) {
					el.translateX += evt.deltaX;
					el.translateY += evt.deltaY;
					evt.preventDefault();
				},
				tap: function(evt) {
					//console.log(el.scaleX + "_" + el.scaleY + "_" + el.rotateZ + "_" + el.translateX + "_" + el.translateY);
					//console.log("tap");
				},
				doubleTap: function(evt) {
					To.stopAll();
					if(el.scaleX > 1.5) {

						new To(el, "scaleX", 1, 500, ease);
						new To(el, "scaleY", 1, 500, ease);
						new To(el, "translateX", 0, 500, ease);
						new To(el, "translateY", 0, 500, ease);
					} else {
						var box = el.getBoundingClientRect();
						var y = box.height - ((evt.changedTouches[0].pageY - topPx) * 2) - (box.height / 2 - (evt.changedTouches[0].pageY - topPx));

						var x = box.width - ((evt.changedTouches[0].pageX) * 2) - (box.width / 2 - (evt.changedTouches[0].pageX));
						new To(el, "scaleX", 2, 500, ease);
						new To(el, "scaleY", 2, 500, ease);
						new To(el, "translateX", x, 500, ease);
						new To(el, "translateY", y, 500, ease);
					}
					//console.log("doubleTap");
				},
				longTap: function(evt) {
					//console.log("longTap");
				},
				swipe: function(evt) {
					//console.log("swipe" + evt.direction);
				}

			});
		</script>
	</body>

</html>